<template>
     <div id="container">
       <div id="header">
         <div>About
         </div>
         <ul id="hide_ul">
           <li>about web maker</li>
         <li>about the web</li>
         </ul>
       </div>
      <div id="login_wrap">
        <div id="head_protraint"></div>
        <div id="form_wrap">
          <input type="text" id="username" class="comminput" placeholder="username">
          <input type="password" id="password" class="comminput" placeholder="password">
          <div id="word">welcome to my web about chinese culture</div>
          <input type="button" id="login" value="Login">
          <!-- <div id="registe"></div> -->
          <router-link to="/register" id="registe"></router-link>
        </div>
      </div>
      <div id="next_web"></div>
    </div>
</template>
<script>

export default {
  name: 'Login'
}
</script>

<style lang="css" scoped>

  #container{
    position: relative;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(15deg, transparent, transparent 40%, #d6acac);
    background-image: url('../../imgs/Login_backgroud.png');
    background-repeat: no-repeat;
    background-size: 100%;

  }

  #head_protraint{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    transform:translate(-50%,-50%);
    border: 5px solid rgb(0, 0, 0);
    box-shadow: 2px 2px 3px 2px rgb(85, 85, 85);
    border-radius: 50%;
    background-image: url('../../imgs/loge.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
  }

  #login_wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 350px;
    border: 4px solid rgb(49, 49, 49);
    transform: translate(-50%,-50%);
    border-radius: 15px;
    opacity: 0.85;
  }

  #form_wrap{
    position: absolute;
    height: 300px;
    width: 100%;
    top: 70px;

  }

  .comminput{
    margin-left: 45px;
    margin-top: 35px;
    border: none;
    border-radius: 20px;
    height: 32px;
    width: 260px;
    font-size: 18px;
    text-indent: 10px;
    box-shadow: 1px 1px 2px 1px rgb(128, 128, 128);
  }
  #word{
    position: absolute;
    top: 0%;
    width: 100%;
    text-align: center;
    color: #f59595;
    font-weight: 700;
    font-size: 16px;
    text-shadow: 1px 1px 2px #fff;
  }

  #header{
    position: absolute;
    top: 1%;
    left: 1%;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: rgb(208, 246, 255);
    border: 2px solid rgb(169, 212, 250);
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: 700;
    animation: an 2.5s linear infinite alternate;
  }

  @keyframes an{
    0%,100%{
      transform: translate(0,0);
    }
    50%{
      transform: translate(0px,5px);
    }
  }

  #hide_ul{
    display: none;
    height: 120px;
    width: 200px;

  }
   #hide_ul li{
     margin-top: 5px;
     background-color: rgb(225, 246, 255);
      height: 60px;
      width: 200px;
      text-align: left;
      color: rgb(97, 97, 97);
      text-indent: 14px;
      transition: all 0.5s linear;

   }
   #hide_ul li:hover{
     background-color: rgb(239, 255, 250);
     text-indent: 30px;
   }
   #login{
     position: absolute;
     height: 34px;
     width: 140px;
     border-radius: 20px;
     font-size: 16px;
     font-weight: 700;
     background-color: rgb(239, 255, 250);
     top: 65%;
     left: 50%;
     transform: translate(-50%,-50%);
   }

   #registe{
     background-image: url('../../imgs/收起箭头小2.png');
     background-size: 100%;
     height: 30px;
     width: 30px;
     border-radius: 50%;
     position: absolute;
     bottom: 0%;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color:#fff;
     cursor: pointer;
   }

   #next_web{
     position: absolute;
     bottom: 0%;
     left: 50%;
     transform: translate(-50%,-50%);
     background-image: url('../../imgs/下箭头.png');
     background-size: 100%;
      height: 60px;
      width: 60px;
      transition: all 0.5s linear;
   }

   #next_web:hover{
     bottom: 1%;
   }
</style>
